SVG进阶|SVG渐变(SVGGradients)

SVG渐变是填充SVG图形的一种方法。通过填充渐变色，可以使SVG图形的填充色或描边色由一种颜色过渡到另一种颜色。在某些时候对SVG图形填充渐变色可以得到非常好看的效果。

SVG渐变的例子

下面展示了在SVG图形上使用填充渐变和描边渐变的几个小例子：

在上面的例子中，第一个矩形的描边色没有使用渐变色，填充色使用从浅绿到深绿色的渐变。第二个矩形填充色和渐变色都使用从浅绿到深绿色的渐变。第三个矩形没有填充色，描边色使用从浅绿到深绿色的渐变。第四个矩形填充色使用从浅绿到深绿色的渐变，没有使用描边。

我们可以使用两种类型的渐变：线性渐变与径向渐变。

线性渐变

线性渐变是指从一种颜色到另一种颜色的线性变化。在前面的例子中使用的都是线性渐变。

线性渐变的方向可以是水平方向或垂直方向，也可以是你指定的一个角度的方向。你也可以只为SVG图形的某一部分填充渐变色，而不是整个SVG图形。下面是一些使用线性渐变填充SVG矩形的例子：

第一个矩形使用的是垂直渐变，第二个矩形使用的是水平渐变，第三个矩形使用的是对角渐变（渐变色从左上角到右下角），第四个矩形仅仅在右侧使用渐变色来填充。

我们可以使用 元素来定义线性渐变。

     xmlns:xlink="http://www.w3.org/1999/xlink">
  
                        x1="0%" y1="0%"
                    x2="0%" y2="100%"
                    spreadMethod="pad">
      
      
    
  
  属性描述id渐变的唯一ID号，用于在图形中引用该渐变x1, y1x1, y1定义渐变的起点。使用的是百分比数值x2, y2x2, y2定义渐变的终点。使用的是百分比数值spreadMethod这个参数定义渐变的传播方式。可取值有3个：pad，repeat和reflect。pad是指开始和结束颜色平铺填充整个渐变。repeat是指渐变在整个图形中不断重复。reflect是指渐变在图形中会镜像显示。这个参数只有在渐变没有填充满整个图形时才有效果。（可以参看元素的offset属性）gradientTransform可以使用该参数在应用一个渐变之前对其进行转换（如旋转）gradientUnits设置计算 x1, y1 和 x2,y2的方式xlink:href设置这个渐变继承自另一个渐变，取值为另一个渐变的ID号。换句话说，如果这个渐变没有设置其它属性值，它将使用ID指向的那个渐变作为默认的渐变

下面的表格中列出了 元素的一些属性和含义。

关于这些属性通过图像来说明比较清晰，来看下面的图像：

offset 10%  offset 30%  offset 70%  offset 90%   Padded with first color   Padded with last color

下面的代码是上图中渐变定义的代码：

         xmlns:xlink="http://www.w3.org/1999/xlink">

                    x1="0%" y1="0%"
                  x2="100%" y2="0%"
                  spreadMethod="pad">
    
    
    
    
  

在上面的例子中,最后三个绿色的径向渐变分别将渐变的中心设置在不同的位置上，其它都相同，得到的效果却有所不同。第一个绿色径向将被的中心位于矩形的中心位置，第二个绿色径向渐变的中心位于矩形的上边部中心位置，第三个绿色径向渐变的中心位于军训的左上角位置。

我们可以使用 元素来定义颜色径向渐变。下面是一个例子：

         xmlns:xlink="http://www.w3.org/1999/xlink">
    
                   fx="5%" fy="5%" r="65%"
           spreadMethod="pad">
          
          
        
    
    属性描述id用于在图形上引用该渐变的唯一标识符cx,cy径向渐变的中心点X和Y坐标。它的值使用用填充的百分比值。如果没有定义则默认值为50%fx, fy径向渐变的焦点X和Y值。它的值使用用填充的百分比值。如果没有定义则默认值为50%。
注意：在Firefox 3.05中如果值低于5%可能会发生问题。r径向渐变的半径spreadMethod定义径向渐变的传播方式。可取值有3个：pad，repeat和reflect。pad是指开始和结束颜色平铺填充整个渐变。repeat是指渐变在整个图形中不断重复。reflect是指渐变在图形中会镜像显示。这个参数只有在渐变没有填充满整个图形时才有效果。gradientTransform可以使用该参数在应用一个渐变之前对其进行转换（如旋转）gradientUnits设置计算 x1, y1 和 x2,y2的方式xlink:href设置这个渐变继承自另一个渐变，取值为另一个渐变的ID号。换句话说，如果这个渐变没有设置其它属性值，它将使用ID指向的那个渐变作为默认的渐变

径向渐变的聚焦点是颜色辐射的角度。你可以将径向渐变想象为一盏灯，那么聚焦点决定灯光从什么方向“照射”在图形上。 50%,50% 表示在图形的正上方， 5%,5% 表示在图形的左上角位置。

为了更好的理解径向渐变的中心点和聚焦点，你最好亲自动手分别设置一些它们不同的值，观察得到的不同效果。

渐变的转换

你可以使用标准的SVG转换函数来对渐变进行各种转换。可以在 和 元素中使用 gradientTransform 属性来进行渐变的转换。下面是一个例子：

     xmlns:xlink="http://www.w3.org/1999/xlink">
  
                        x1="0%" y1="0%"
                    x2="0%" y2="100%"
                    spreadMethod="pad"
                    gradientTransform="rotate(45)"
    >